<template>
  <!-- 菜单授权 -->
  <edu-dialog
    :title.sync="dialog.title"
    :visible.sync="dialog.showDialog"
    @close="close"
    @confirm="confirm"
    width="70%"
  >
    <el-radio-group
      v-model="tabPosition"
      @input="radioChange"
      size="small"
      style="margin-bottom: 15px"
    >
      <el-radio-button label="100000002">App菜单</el-radio-button>
      <el-radio-button label="100000001">Pc菜单</el-radio-button>
    </el-radio-group>

    <el-tree
      v-loading="loading"
      :data="menuList"
      node-key="pageId"
      :props="defaultProps"
      :default-expand-all="true"
      :highlight-current="true"
      :check-on-click-node="true"
      :default-checked-keys="checkedKeys"
      show-checkbox
      ref="tree"
      style="height: 400px; overflow: auto"
    ></el-tree>
  </edu-dialog>
</template>

<script>
import {
  queryRolePageList,
  queryRolePageTree,
  updateRolePage,
} from "@/api/roles";
import utils from "@/utils";

export default {
  data() {
    return {
      currentRole: "",
      loading: false,
      tabPosition: "100000001", //默认菜单组
      defaultProps: {
        children: "subPageList",
        label: "pageName",
      },
      menuList: [],
      checkedKeys: [],
      dialog: {
        title: "查看权限",
        showDialog: false,
      },
    };
  },
  methods: {
    open(data) {
      this.dialog.showDialog = true;
      this.currentRole = data;
      this.queryPageTree();
    },
    close() {
      this.dialog.showDialog = false;
    },
    // 菜单组切换
    radioChange() {
      this.queryPageTree();
    },
    // 查询树
    async queryPageTree() {
      // 获取选中的值
      let { returnObj: res } = await queryRolePageList({
        roleId: this.currentRole.roleId,
        systemId: this.tabPosition,
      });
      this.checkedKeys = res.map((item) => {
        if (item.checked) {
          return item.pageId;
        }
      });
      // 去重
      // this.checkedKeys = Array.from(new Set(pageIds))
      // console.log(this.checkedKeys);

      // 获取树
      this.loading = true;
      let { returnObj } = await queryRolePageTree({
        roleId: this.currentRole.roleId,
        systemId: this.tabPosition,
      });
      this.menuList = returnObj;
      this.loading = false;
    },
    async confirm() {
      let pageIdList = this.$refs.tree.getCheckedKeys();

      await updateRolePage({
        roleId: this.currentRole.roleId,
        systemId: this.tabPosition,
        pageIdList: pageIdList,
      });

      this.close();

      this.$message({
        type: "success",
        message: "成功",
      });

      this.$emit("done");
    },
  },
};
</script>

<style lang="scss" scoped></style>
